<template>
  <div
    class="table-box-power flex-directionc"
    :style="{ overflow: 'hidden', position: 'relative' }"
  >
    <div class="flex-sub1" ref="yHeight">
      <a-table
        :columns="columns"
        :pagination="false"
        :dataSource="data"
        :scroll="{ x: true, y: yHeight }"
        rowKey="id"
        :row-selection="{
          selectedRowKeys,
          onChange: tableChange,
        }"
        size="middle"
      >
        <template #operation>
          <div class="table-title-box space-between">
            <span class="table-title">操作</span>
          </div>
        </template>
        <template slot="Controls" slot-scope="text, record">
          <div class="operation-box">
            <a-icon
              type="edit"
              title="编辑"
              class="icon-style"
              @click="editOne(record)"
            />
            <a-icon
              type="delete"
              title="删除"
              class="icon-style"
              @click="deleteLabel(record)"
            />
          </div>
        </template>
      </a-table>
    </div>

    <!-- 表格的操作 -->
    <div class="table-footer">
      <!-- <div class="operation-btn">
        <a-button size="small" v-if="allSelected" @click="allSelect(false)"
          >取消全选</a-button
        >
        <a-button size="small" v-else @click="allSelect(true)"
          >全选当前页</a-button
        >
      </div> -->
      <pagination
        :page.sync="pagination.page"
        :pageSize.sync="pagination.pageSize"
        :total.sync="total"
        @paginationChange="paginationChange"
      ></pagination>
    </div>
  </div>
</template>
<script>
import { debound } from "@/utils/index.js";
export default {
  data() {
    return {
      pagination: {
        page: 1,
        pageSize: 50,
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 70,
          customRender: (text, record, index) => {
            return index + 1;
          },
          fixed: "left",
          align: "center",
        },
        {
          title: "标签名称",
          width: 200,
          dataIndex: "labelName",
          key: "labelName",
          ellipsis: true,
        },
        {
          title: "适用对象",
          width: 200,
          dataIndex: "referTo",
          key: "referTo",
        },
        {
          dataIndex: "labelDesc",
          key: "labelDesc",
          title: "标签描述",
        },
        {
          width: 200,
          dataIndex: "",
          key: "",
          fixed: "right",
          slots: {
            title: "operation",
          },
          scopedSlots: { customRender: "Controls" },
        },
      ],
      selectedRowKeys: [],
      yHeight:
        document.documentElement.clientHeight -
        document.documentElement.clientHeight / 5.4,
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  created() {},
  mounted() {
    this.watchResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
  methods: {
    watchResize() {
      this.yHeight = this.$refs["yHeight"].clientHeight - 100;
      window.addEventListener("resize", this.screenResize);
    },
    screenResize: debound(function () {
      // document.documentElement.clientHeight;
      this.yHeight = this.$refs["yHeight"].clientHeight - 100;
    }, 200),
    paginationChange(data) {
      // 分页变化
      this.$emit("requestTable", data);
    },
    tableChange(rowkeys, rows) {
      this.selectedRowKeys = rowkeys;
    },
    // 全选、全不选
    allSelect(flag) {
      // 判断是否全选
      if (flag) {
        for (let i = 0; i < this.data.length; i++) {
          if (!this.selectedRowKeys.includes(this.data[i].id)) {
            this.selectedRowKeys.push(this.data[i].id);
          }
        }
      } else {
        let dealKeys = this.data.map((item) => {
          return item.id;
        });
        this.selectedRowKeys = this.selectedRowKeys.filter((item) => {
          return !dealKeys.includes(item);
        });
      }
    },
    // 提交采集、监控
    handleOk() {
      this.$refs.modalForm.validate((valid) => {
        if (valid) {
          const requestData = {
            stationId: this.rowData.id,
            deviceSn: this.modalForm.deviceSn,
            deviceType: this.flag,
          };
        } else {
          return false;
        }
      });
    },
    // 关闭采集、监控modal，重置表单
    handleCancel() {
      this.$refs.modalForm.resetFields();
      this.visible = false;
    },
    // 打开采集、监控modal
    openModal(index, data) {
      this.flag = index;
      this.visible = true;
      this.rowData = data;
      this.modalForm.collectorSn = "";
    },
    // 打开抽屉
    opendrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    deleteLabel(item) {
      this.$confirm({
        title: `确认删除${item.labelName}?`,

        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          this.$emit("deleteOne", item);
        },
        onCancel: () => {},
      });
    },
    editOne(item) {
      this.$emit("editOne", item);
    },
  },
  computed: {
    // 计算是否全选
    allSelected() {
      let flag = true;
      for (let i = 0; i < this.data.length; i++) {
        if (!this.selectedRowKeys.includes(this.data[i].id)) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // modal标题
    Title() {
      return this.flag == 1 ? "添加采集器" : "添加监控器";
    },
  },
};
</script>
<style lang="less" scoped>
.table-box-power {
  width: 100%;
  // min-height: 500px;
  .operation-box {
    display: flex;
    align-items: center;

    /deep/ .ant-rate {
      font-size: 16px;
    }
  }

  /deep/ .ant-drawer-title {
    font-size: 12px;
  }

  .rate {
    /deep/ .ant-rate-star-second {
      font-size: 16px;
    }

    margin-bottom: 2px;
  }

  .icon-style {
    margin-left: 15px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.3);
    cursor: pointer;

    &:hover {
      color: #048fff;
    }
  }

  /deep/ .ant-table-header-column {
    width: 100%;
  }

  /deep/ .ant-table-wrapper {
    width: 100%;
    min-height: 500px;
    // height: ;
    // flex: 1;
  }

  .table-title-box {
    display: flex;
    align-items: center;

    .table-title {
      margin-left: 4px;
    }

    .question-icon {
      position: relative;
      z-index: 999;
      cursor: pointer;
      margin: 0 5px;

      &:hover {
        color: #048fff;
      }
    }

    .setting {
      margin-right: 20px;
      font-size: 16px;
    }
  }

  .space-between {
    justify-content: space-between;
  }

  /deep/ .ant-table-content {
    font-size: 12px;
    color: #515561;
  }

  .table-footer {
    display: flex;
    justify-content: flex-end;
    // height: 48px;
    padding: 16px;
    width: 100%;
    // height: 64px;
    .operation-btn {
      /deep/ .ant-btn {
        font-size: 12px;
        margin-right: 8px;
      }
    }
  }
}

/deep/
  .ant-table-thead
  > tr
  > th
  .ant-table-column-sorter
  .ant-table-column-sorter-inner-full {
  margin-top: -12px;
}

/deep/ .ant-table td {
  white-space: nowrap;
}
</style>
